/**
 * 树形选择器
 * @author xiaoxujs
 */

import { FC, useEffect, useRef, useState } from "react";
import { SelectBox, TreeFZBox, TreeFZItemBox, TreeTitleBox } from "./style";
import { ISelectTreeProps } from "../../type/components";

export const SelectTree: FC<{
    selectTreeList: ISelectTreeProps[],
    onChange: (value: ISelectTreeProps) => void // 选中的值
    value?: ISelectTreeProps // 选中的值
}> = ({
    selectTreeList,
    onChange,
    value
}) => {
        const selectBoxRef = useRef<HTMLDivElement>(null); // 外层盒子的ref

        const [selectUlShow, setselectUlShow] = useState(false);
        const [listData, setListData] = useState<ISelectTreeProps[]>([]);
        useEffect(() => {
            let arr: ISelectTreeProps[] = JSON.parse(JSON.stringify(selectTreeList));
            let xunhuan = (data: ISelectTreeProps[]) => {
                data.forEach((item) => {
                    if (item.children && item.children.length > 0) {
                        xunhuan(item.children)
                    } else {
                        item.show = true;
                    }
                })
            }
            xunhuan(arr);
            setListData([...arr])
            return () => {

            }
        }, [selectTreeList])

        useEffect(() => {

            const handleClickOutside = (event: MouseEvent) => {
                if (selectBoxRef.current && selectBoxRef.current.contains(event.target as Node)) {
                    // 判断是否有元素  判断点击的元素是否在当前元素中 如果在就不收起 相反 就收起
                } else {
                    setselectUlShow(false)
                }

            }
            document.addEventListener('click', handleClickOutside)

            return () => {
                document.removeEventListener('click', handleClickOutside)
            }
        }, [])

        const handleClick = () => {
            setselectUlShow(true)
        }
        // 点击展开收缩
        const handleClickOpenClose = (key: string) => {
            const newTreeData = JSON.parse(JSON.stringify(listData)) as ISelectTreeProps[];
            const loop = (data: ISelectTreeProps[]) => {
                data.forEach((item) => {
                    if (item.value === key) {
                        item.show = !item.show;
                        setListData(newTreeData)
                    } else {
                        if (item.children) {
                            loop(item.children)
                        }
                    }
                })
            }
            loop(newTreeData)

        }
        // 选中
        const handleSelect = (item: ISelectTreeProps) => {
            setselectUlShow(false)
            onChange && onChange(item)
        }

        const handleXunhuanHTML = (listData: ISelectTreeProps[], level = 0) => {
            level++;
            return <>
                {
                    listData.map((item) => <TreeFZItemBox key={item.value} >
                        <TreeTitleBox onClick={() => handleSelect(item)} $youyi={level - 1} $select = {value?.value === item.value ? 'true' : 'false'}>

                            {(item.children && item.children?.length > 0) && <span onClick={(e) => {
                                e.stopPropagation();
                                handleClickOpenClose(item.value)
                            }} className={item.show ? 'iconfont jiedian icon_xuanzhuan' : 'iconfont jiedian'}>&#xe626;</span>}
                            {item.label}
                        </TreeTitleBox>
                        <div className="cesi">
                            {
                                item.show && item.children && item.children.length > 0 && handleXunhuanHTML(item.children, level)
                            }
                        </div>

                    </TreeFZItemBox>)
                }
            </>
        }
        return (
            <SelectBox ref={selectBoxRef}>
                <div className="input_box">
                    <input
                        type="search"
                        value={value ? value?.label : ''}
                        readOnly
                        onClick={() => handleClick()}
                    />
                    <div className="input_right">
                        <span className="iconfont">&#xe616;</span>
                    </div>
                </div>

                <TreeFZBox show={selectUlShow ? 'true' : 'false'}>
                    {
                        handleXunhuanHTML(listData)
                    }

                </TreeFZBox>
            </SelectBox>

        )

    }
export default SelectTree;
